<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@include file="../include/include-head.jsp" %>
    <script type="text/javascript" src="layer/layer.js"></script>
    <link rel="stylesheet" href="ztree/zTreeStyle.css"/>
    <script type="text/javascript" src="ztree/jquery.ztree.all-3.5.min.js"></script>
    <script type="text/javascript" src="crowd/my-role.js"></script>
    <script type="text/javascript">

        $(function () {

            // 1、初始化数据
            window.pageNum = 1;
            window.pageSize = 5;
            window.keyword = "";

            // 2、调用执行分页函数的函数，显示分页的效果
            generatePage();

            // 3、给查询按钮绑定单击响应函数
            $("#searchBtn").click(function () {

                // ①获取输入框的关键字的值 赋值给 全局变量 window.keyword
                window.keyword = $("#keywordInput").val();

                // ②调用generatePage()函数刷新页面
                generatePage();
            });


            // 4、给新增按钮绑定单击响应函数
            $("#showAddModal").click(function () {

                // 显示模态框
                $("#modalAddRole").modal("show");
            });


            // 5、在新增角色模态框中给保存按钮绑定单击响应函数发送ajax请求
            $("#saveRoleBtn").click(function () {

                // ①获取输入框中得角色名称
                var roleName = $("#addRoleInput").val();


                // ②发送ajax请求
                $.ajax({
                    "url": "role-save.json",
                    "type": "post",
                    "data": {
                        "name": roleName
                    },
                    "dataType": "json",
                    "success": function (response) {

                        if (response.result == "SUCCESS") {
                            // 显示操作成功
                            layer.msg("操作成功！");

                            // 操作成功重新加载页面，并跳转到最后一页
                            window.pageNum = 99999999;

                            generatePage();
                        }

                        if (response.result == "FAILED") {
                            layer.msg("操作失败！" + response.message);
                        }

                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }

                });

                // 关闭模态框
                $("#modalAddRole").modal("hide");

                // 清除模态框数据
                $("#addRoleInput").val("");

            });


            // 6、给 表单 更新按钮绑定单击响应函数
            // 为解决普通绑定单击响应函数后翻页失效问题
            // 使用 on()
            $("#rolePageTbody").on("click", ".pencilBtn", function () {

                //  显示模态框
                $("#modalEditRole").modal("show");

                // 获取当前行里的角色名称
                var roleName = $(this).parent().prev().text();

                // 获取当前角色id
                window.roleId = this.id;

                // 使用 roleName 回显角色名称
                $("#editRoleInput").val(roleName);
            });


            // 7、给 模态框 更新按钮绑定单击响应函数
            $("#editRoleBtn").click(function () {

                // ①获取新的角色名称的值
                var roleName = $("#editRoleInput").val();

                // ②发送ajax请求
                $.ajax({
                    "url": "role-update.json",
                    "type": "post",
                    "data": {
                        "id": window.roleId,
                        "name": roleName
                    },
                    "dataType": "json",
                    "success": function (response) {
                        if (response.result == "SUCCESS") {
                            layer.msg("更新成功！");

                            // 重新加载页面
                            generatePage();
                        }

                        if (response.result == "FAILED") {
                            layer.msg("更新失败！" + response.message);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });

                // 关闭模态框
                $("#modalEditRole").modal("hide");
            });


            // var roleArray = [{roleId: 5, roleName: "aaa"}, {roleId: 6, roleName: "bbb"}];
            // showConfirmModal(roleArray);

            // 8、给确认删除模态框里的确认删除按钮绑定单击响应事件
            $("#removeRoleBtn").click(function () {

                // 将全局变量roleIdArray 转换为JSON字符串
                var requestBody = JSON.stringify(window.roleIdArray);

                // 发送ajax请求进行删除操作
                $.ajax({
                    "url": "role-remove-id-list.json",
                    "type": "post",
                    "data": requestBody,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function (response) {
                        if (response.result == "SUCCESS") {
                            layer.msg("删除成功！");

                            // 重新加载页面
                            generatePage();
                        }

                        if (response.result == "FAILED") {
                            layer.msg("删除失败！" + response.message);
                        }
                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);
                    }
                });

                // 关闭模态框
                $("#modalConfirmRole").modal("hide");
            });


            // 9、给单条删除按钮绑定单击响应事件
            $("#rolePageTbody").on("click", ".removeBtn", function () {

                // 获取当前角色名称
                var roleName = $(this).parent().prev().text();

                // 创建role对象放入数组
                var roleArray = [{
                    roleId: this.id,
                    roleName: roleName
                }];

                // 调用专门的函数显示确认删除模态框
                showConfirmModal(roleArray);
            });


            // 10、给总的多选框绑定单击响应事件
            $("#sumBox").click(function () {

                // 获取当前多选框的状态
                var currentStatus = this.checked;

                // 用当前多选框的状态赋值给其他多选框，实现全选或全不选
                $(".itemBox").prop("checked", currentStatus);
            });


            // 11、全选、全不选的方向操作
            $("#rolePageTbody").on("click", ".itemBox", function () {

                // 获取当前以及被勾选的多选框的数量
                var checkedBoxCount = $(".itemBox:checked").length;

                // 获取多选框的总数量
                var totalBoxCount = $(".itemBox").length;

                // 通过前两个值是否相等来实现 全选和全不选的方向操作
                $("#sumBox").prop("checked", checkedBoxCount == totalBoxCount);
            });


            // 12、给批量删除按钮绑定单击响应函数
            $("#removeRoleArray").click(function () {

                // 创建一个数组对象，用来保存后面的role对象
                var roleArray = [];

                // 遍历每一个 .itemBox 选中的多选框
                $(".itemBox:checked").each(function () {

                    // 使用this.id获取当前遍历的多选框所对应的角色的id
                    var roleId = this.id;

                    // 通过DOM操作获取当前遍历的多选框所对应的角色的名称
                    var roleName = $(this).parent().next().text();

                    roleArray.push({
                        "roleId": roleId,
                        "roleName": roleName
                    });
                });

                // 判断 roleArray 的长度是否为0
                if (roleArray.length == 0) {
                    layer.msg("请至少选择一条进行删除！");
                    return;
                }

                // 调用封装好的确认模态框函数
                showConfirmModal(roleArray);
            });


            // 13、给分配权限按钮绑定单击响应函数
            $("#rolePageTbody").on("click", ".checkBtn", function () {

                // 将当前角色的id存入全局变量中
                window.roleId = this.id;

                // 打开模态框
                $("#assignModal").modal("show");

                // 调用专门的函数显示权限树形结构
                fillAuthTree();
            });


            // 14、给分配权限模态框中的“分配”按钮绑定单击响应函数
            $("#assignBtn").click(function () {

                // [1]声明一个数组用来保存被勾选的权限id
                var authIdArray = [];

                // [2]获取zTreeObj对象
                var zTreeObj = $.fn.zTree.getZTreeObj("authTreeDemo");

                // [3]通过zTreeObj对象获取全部被勾选的节点
                var checkedNodes = zTreeObj.getCheckedNodes();

                // [4]遍历所有被勾选的节点，获取其对应的id
                for (var i = 0; i < checkedNodes.length; i++) {

                    var checkedNode = checkedNodes[i];

                    var authId = checkedNode.id;

                    authIdArray.push(authId);
                }

                // [5] 发送ajax请求执行分配
                var requestBody = {
                    "authIdArray": authIdArray,
                    // 方便服务器端 Controller 用Map接收
                    "roleId": [window.roleId]
                };

                requestBody = JSON.stringify(requestBody);

                $.ajax({
                    "url": "assign-save-auth-to-role.json",
                    "type": "post",
                    "data": requestBody,
                    "contentType": "application/json;charset=UTF-8",
                    "dataType": "json",
                    "success": function (response) {
                        var result = response.result;

                        if (result == "SUCCESS"){
                            layer.msg("操作成功！");

                            // 关闭模态框
                            $("#assignModal").modal("hide");
                        }
                        if (result == "FAILED"){
                            layer.msg("操作失败！"+response.message);

                            $("#assignModal").modal("hide");
                        }

                    },
                    "error": function (response) {
                        layer.msg(response.status + " " + response.statusText);

                        $("#assignModal").modal("hide");
                    }
                });
            });




        });

    </script>
</head>

<body>

<%@include file="../include/include-nav.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%@include file="../include/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="keywordInput" class="form-control has-success" type="text"
                                       placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button id="searchBtn" type="button" class="btn btn-warning"><i
                                class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button id="removeRoleArray" type="button" class="btn btn-danger"
                            style="float:right;margin-left:10px;">
                        <i class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button id="showAddModal" type="button" class="btn btn-primary" style="float:right;">
                        <i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox" id="sumBox"></th>
                                <th>名称</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="rolePageTbody">

                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
</body>


<%@include file="/WEB-INF/modal/modal-role-add.jsp" %>
<%@include file="/WEB-INF/modal/modal-role-edit.jsp" %>
<%@include file="/WEB-INF/modal/modal-role-confirm.jsp" %>
<%@include file="/WEB-INF/modal/modal-role-assign-auth.jsp" %>
</html>